let userlistModule = (function () {
  let $deleteAll = $('.deleteAll'),
    $selectBox = $(".selectBox"),
    $searchInp = $('.searchInp'),
    $tableBox = $(".tableBox"),
    $tbody = $tableBox.find('tbody'),
    $checkAll = $("#checkAll"),
    // 进行了元素dom渲染绑定后才能有，刚开始这里是获取不到的（进行了删除操作也需要重新获取一下）
    $checklist = null;
  let userId = null;
  // 绑定部门信息
  async function bindDepart() {
    let departInfo = await queryDepart();
    if (departInfo.code === 0) {
      let str = ``;
      departInfo.data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      })
      $selectBox.append(str);
    }
  }

  // 从服务器获取用户通讯录信息并绑定  departmentId=0&search=''
  async function bindUserlist() {
    let params = {
      departmentId: $selectBox.val(),
      search: $searchInp.val().trim()
    }
    // let result = await axios.get("/user/list", { params });
    let result = await axios.get(`/user/list/?departmentId=${$selectBox.val()}&search=${$searchInp.val().trim()}`);

    // console.log(params, result);
    if (result.code === 0) {
      // console.log(result.data)
      let str = ``;
      result.data.forEach(item => {
        let {
          department,
          departmentId,
          desc,
          email,
          id,
          job,
          jobId,
          name,
          phone,
          sex,
        } = item;
        str += `
          <tr>
            <td class="w3"><input type="checkbox" userId="${id}"></td>
            <td class="w10">${name}</td>
            <td class="w5">${sex == 0 ? '男' : '女'}</td>
            <td class="w10">${department}</td>
            <td class="w10">${job}</td>
            <td class="w15">${email}</td>
            <td class="w15">${phone}</td>
            <td class="w20">${desc}</td>
            <td class="w12" userId="${id}">
              <a href="javascript:;">编辑</a>
              <a href="javascript:;">删除</a>
              <a href="javascript:;">重置密码</a>
            </td>
          </tr>
        `;
      })
      $tbody.html(str);
      $checklist = $tbody.find("input[type='checkbox']");
    }
  }

  // 用户搜索+下拉框选择不同部门都要经过bindUserlist方法绑定，只需要绑定当前操作直接调用bindUserlist即可
  function bingSearch() {
    $selectBox.change(function () {
      bindUserlist();
    })
    $searchInp.keydown(function (e) {
      if (e.keyCode == 13) {
        bindUserlist();
      }
    })
  }

  // 用户信息编辑删除
  function handleEvent() {
    $tbody.click(async event => {
      let target = event.target,
        $target = $(target),
        TGA = target.tagName,
        TEXT = target.innerText;
      if (TGA === 'A') {
        // 获取当前点击的a标签父级元素上的自定义属性userId
        userId = $target.parent().attr("userId");
        if (TEXT === '编辑') {
          window.location.href = `../page/useradd.html?id=${userId}`;
          return;
        }
        if (TEXT === '删除') {
          // 一般删除这种敏感操作会做个友情提示二次确定
          let flag = confirm(`确定删除id为${userId}的用户吗？`);
          if (flag) {
            let result = await axios.get(`/user/delete?userId=${userId}`);
            // console.log(result)
            if (result.code == 0) {
              alert("删除成功");
              // 同时移出掉本地的这条数据
              $target.parent().parent().remove();
              // 进行删除操作后需要重新获取一下
              $checklist = $tbody.find("input[type='checkbox']");
              return;
            }
            alert('删除失败，请联系管理员');
          }
          return;
        }
        if (TEXT === '重置密码') {
          // /user/resetpassword
          // 一般这种敏感操作会做个友情提示二次确定
          let flag = confirm(`确定重置id为${userId}的用户密码吗？`);
          if (flag) {
            let result = await axios.post(`/user/resetpassword`, { userId });
            if (result.code == 0) {
              alert("重置成功");
              return;
            }
            alert('重置失败，请联系管理员');
          }
          return;
        }
      }
    })
  }

  // 列表单选全选处理 及 批量删除操作 
  async function handleSelectDelAll() {
    // 全选按钮点击
    $checkAll.click(_ => {
      let status = $checkAll.prop("checked");
      $checklist.prop("checked", status);
    })
    // 列表项的点击(控制双选)
    $tbody.click(ev => {
      let target = ev.target,
        TAG = target.tagName;
      if (TAG === 'INPUT') {
        let flag = true;
        $checklist.each((index, item) => {
          if (!$(item).prop("checked")) {
            flag = false;
          }
        })
        $checkAll.prop("checked", flag);
      }
    });
    // 批量删除
    $(".deleteAll").click(_ => {
      let userIds = [];
      $checklist.each((index, item) => {
        if ($(item).prop("checked")) {
          let userId = $(item).attr("userId");
          userIds.push(userId);
        }
      })
      if (userIds.length === 0) {
        alert("未选中要删除的，请重新选择.");
        return;
      }
      // 确定是否删除
      let flag = confirm(`确定删除这${userIds.length}条员工信息吗?`);
      if (!flag) return;
      /**
       * 真实项目中批量删除有两种方法
       * 1.把删除的唯一表示传递给服务器(比如这里的userId), 由服务器批量删除(服务器端处理)
       * 2.客户端自己基于递归的方式, 一项项的去删除(客户端自己处理)
       */
      let index = 0
      let execFunc = () => {
        if (index >= userIds.length) {
          alert(`成功删除所选择的数据`);
        } else {
          alert(`成功删除${index + 1}条的数据,剩余删除失败`);
        }
        bindUserlist();
      }
      let send = async () => {
        // 删完了，重新绑定数据
        if (index >= userIds.length) {
          execFunc();
          return;
        }
        let userId = userIds[index++];
        let result = await axios.get(`/user/delete`, { params: { userId } });
        // 遇到错误也重新绑定数据
        if (result.code != 0) {
          execFunc();
          return;
        }
        send();
      }
      send();

    })
  }

  return {
    init() {
      bindDepart();
      bindUserlist();
      bingSearch();

      // 基于事件委托批量处理
      handleEvent();

      // 列表单选全选处理 及 批量删除操作 
      handleSelectDelAll();
    }
  }
})();

userlistModule.init();